<template>
	<view class="choose-member">
		<view style="background-color: #2F75FA; height: 160rpx;"></view>

		<view class="top d-inline-block">
			<view class="goods" style="margin-top: -90rpx;">
				<u-image :src="FormData.top_img" width="100%" height="250rpx" radius="10rpx"></u-image>
				<view class="name">{{ FormData.title }}</view>
				<view class="status">{{ data.status }}</view>
				<view class="flex-between">
					<price :value="FormData.price" color="#FF4105"></price>
					<view class="rest">
						剩余：{{ FormData.chooseStock }}名
					</view>
				</view>
			</view>
		</view>

		<u-gap height="20rpx" bgColor="#F3F3F3"></u-gap>

		<view class="choose">
			<!-- 选择赛事队员    member_ids-->
			<choose-person v-model="checked" :chooseStock='chooseStock' :list="list" v-if="chooseType === '1'" />

			<!-- 选择赛事队伍  team_ids-->
			<choose-team v-model="checked" :list="list1" v-else-if="chooseType === '2'" />

			<!-- 选择赛事队伍+队员  enroll_id-->
			<choose-team-person v-model="checked" :list="list1" :member_idlist="member_ids"  v-else-if="chooseType === '3'" />
		</view>

		<!-- <view class="footer flex-align" >
			<footerLeft></footerLeft> -->
		<!-- <view v-if="is_btn" class="btn_n" @click="register" >立即报名</view>
			<view  v-else class="btn" @click="register">立即报名</view> -->
		<!-- <u-button  text="立即报名" shape="circle" @click="register" :disabled="disabled"
				color="linear-gradient(0deg, rgb(47, 117, 250) 0%, rgb(82, 142, 255) 65%)"></u-button>
		</view> -->

		<view class="bottom-add-btn flex-align" style="height: 160rpx;" v-if="chooseType === '3'" >
			<!-- <view class="flex-center flex-column" style=" margin-right: -80rpx; white-space: nowrap; font-size: 24rpx;">
				
				<footerLeft></footerLeft>
			</view> -->
			<view class="" style="width: 90%;position: fixed;left: 5%;bottom: 20rpx;padding: 26rpx 0;" v-if="limit == limitlength">
				<u-button text="立即报名" shape="circle" @click="transInfo" :disabled="disabled"
					color="linear-gradient(0deg, rgb(47, 117, 250) 0%, rgb(82, 142, 255) 65%)"></u-button>
			</view>
			<view class="" style="width: 90%;position: fixed;left: 5%;bottom: 20rpx;padding: 26rpx 0;" v-else>
				<u-button @click="congif" text="立即报名" shape="circle" :disabled="disabled"
					color="linear-gradient(0deg, rgb(223, 223, 223) 0%, rgb(229, 229, 229) 65%)"></u-button>
			</view>
		</view>
		<view class="bottom-add-btn flex-align" style="height: 160rpx;" v-else >
			<view class="" style="width: 90%;position: fixed;left: 5%;bottom: 20rpx;padding: 26rpx 0;">
				<u-button text="立即报名" shape="circle" @click="transInfo" :disabled="disabled"
					color="linear-gradient(0deg, rgb(47, 117, 250) 0%, rgb(82, 142, 255) 65%)"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import choosePerson from './person.vue';
	import chooseTeam from './team.vue';
	import chooseTeamPerson from './team-person.vue';
	import footerLeft from "@/components/footer-left/footer-left.vue";
	const venues = require("@/api/venues/venues.js");

	export default {
		components: {
			choosePerson,
			chooseTeam,
			chooseTeamPerson,
			footerLeft
		},
		data() {
			return {
				op: {},
				chooseType: '', // 选择类型
				data: {},
				list: [],
				list1: [],
				checked: [],
				FormData: {
					price: '',
					chooseStock: '',
					top_img: '',
					title: '',
					race_id: '',
					windows: '',
					sku: "",
					goods_code: "",
					price_list: '',
					yard_name:''
				},
				chooseStock: '',
				is_btn: true,
				class_id: '',
				pay_wait_time: '00:15:00',
				order_id: '',
				checkedlist: [],
				datalist: {},
				checklength: '',
				limit: '',
				limitlength: '',
				limitid:'',
				itemlist:[],
				member_ids:''
			}
		},
		computed: {
			disabled() {
				if (this.chooseType == 3) {
					this.limitid = this.checked
					this.itemlist.forEach(item => {
						if (this.limitid == item.id) {
							this.limitlength = item.memberData[0].length
							this.member_ids = item.memberData[0].member_ids
						}
					})
				}
				
				this.checklength = this.checked.length
				this.checkedlist = this.checked
				return this.checked.length === 0;
			}
		},
		onLoad(options) {
			console.log(options,'999')
			var nowdate = new Date();
			var num = options.enroll_type
			this.chooseType = num.toString()
			this.op = options
			this.FormData.price = options.price
			this.FormData.price_list = options.price
			this.FormData.windows = options.windows
			this.FormData.chooseStock = options.chooseStock
			this.FormData.goods_code = options.goods_code
			this.FormData.yard_name = options.yard_name

			this.FormData.sku = options.sku
			this.chooseStock = options.chooseStock
			this.FormData.title = options.title
			this.FormData.top_img = options.top_img
			this.FormData.race_id = options.race_id
			if (this.FormData.race_id != '') {
				this.getTeamList()
				this.getMemberList()
				// this.getShopTicket();
			}

			// if (Object.keys(options).length) {
			// 	this.list.push(options);
			// }
		},
		onShow() {
			this.getMemberList()
			this.getTeamList()
		},

		methods: {
			// async getShopTicket() {
			// 	console.log(this.selectionArr,'8985')
			// 	uni.showLoading({
			// 		title: "加载中",
			// 		mask: true,
			// 	});
			// 	let postData = {
			// 		ticket_id: this.FormData.race_id,
			// 		project_id: getApp().globalData.projectId,		appid: this.$https.weixinAppId,
			// 		venue_id: this.selectionArr[0].venueDetail,
			// 		goods_type: 'race',
			// 	};
			// 	let res = await venues.getTicketDetail(postData);
			// 	if (res.code == 1) {
			// 		this.ticketData = res.data;
			// 		uni.hideLoading();
			// 	}
			// },
			// 获取队伍列表
			async getTeamList() {
				let params = {
					open_id: uni.getStorageSync("openid"),
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					race_id: this.FormData.race_id,
				}
				let res = await venues.getTeamList(params)
				if (res.code == 1) {
					let itemArr = res.data.result.itemArr
					this.itemlist = res.data.result.itemArr
					itemArr.forEach(item => {
						item.race_id = this.FormData.race_id
					})
					
					this.list1 = itemArr
					console.log(this.list1,'2222')
				}
			},
			// 获取队员列表
			async getMemberList() {
				let params = {
					open_id: uni.getStorageSync("openid"),
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					race_id : this.FormData.race_id,
				}
				let res = await venues.getMemberList(params)
				if (res.code == 1) {
					this.limit = res.data.limit
					const p = res.data.result.itemArr
					this.list = p.map(item => {
						item.disabled = false
						return item

					})
				}
			},
			async register() {
				if (this.chooseType == 1) {
					this.person_id = this.checked.toString()
				} else if (this.chooseType == 2) {
					this.team_id = this.checked.toString()
				} else if (this.chooseType == 3) {
					this.list1.forEach((item, index) => {
						if (this.checked == item.id) {
							this.member_ids = item.memberData[0].member_ids
						}
						// this.member_ids = this.checked.toString() + "##" + this.member_ids
						this.member_ids = this.member_ids

					})
					this.team_id = this.checked.toString()
					this.person_id = this.member_ids
				}
				// enroll_id  = race_id
				//  member_ids 队伍加人/ren 
				// team_ids 队伍/和队伍加人 

				let params = {
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					sign_up_type: this.chooseType,
					enroll_id: this.FormData.race_id,
					member_ids: this.person_id,
					team_ids: this.team_id,
					sku: this.op.sku
				}
				let res = await venues.createSignUp(params)
				if (res.code == 1) {
					this.class_id = res.data.result
					this.transInfo()
				}
			},
			// 金额计算保留两位小数
			amount(value) {
				return parseFloat(value).toFixed(2);
			},
			congif(){
				uni.showToast({
					title: '报名人员不足',
					icon:'error',
					duration:850
				});
			},
			// 此时此刻会生成一个订单
			async transInfo() {
				var that = this;
				if (this.chooseType == 1) {
					that.FormData.price_list = that.amount(that.FormData.price * this.checklength)
					this.person_id = this.checked.toString()
				} else if (this.chooseType == 2) {
					this.team_id = this.checked.toString()
				} else if (this.chooseType == 3) {
					this.list1.forEach((item, index) => {
						if (this.checked == item.id) {
							this.member_ids = item.memberData[0].member_ids
						}
						// this.member_ids = this.checked.toString() + "##" + this.member_ids
						this.member_ids = this.member_ids

					})
					this.team_id = this.checked.toString()
					this.person_id = this.member_ids
				}

				let datas = {
					top_img:this.FormData.top_img,
					title:this.FormData.title,
					status:this.FormData.status,
					goods_code: this.FormData.goods_code,
					goods_sku: this.FormData.sku,
					sign_up_type: this.chooseType,
					enroll_id: this.FormData.race_id,
					member_ids: this.person_id,
					team_ids: this.team_id,
					sku: this.op.sku,
					owner: uni.getStorageSync("phone"),
					goods_type: 'enroll',
					amountValue: 1,
					amount_payable: that.FormData.price_list,
					consumption_type: '',
					goods_id: that.FormData.race_id,
					pay_method: 1,
					order_type: 8,
					pay_wait_time: that.pay_wait_time,
					venue_id: that.op.venue_id,
					purchase_route: 2,
					goods_number: 1,
					goods_price: that.FormData.price,
					goods_name: that.FormData.title,
					goods_image: that.FormData.top_img,
					goods_amout: that.FormData.price,
					order_money: that.FormData.price,
					windows: that.FormData.windows,
					student_info: "",
					yard_name: this.FormData.yard_name
				}
				let data = JSON.stringify(datas)
				let params = {
					data: data,
					project_id: getApp().globalData.projectId,
					open_id: uni.getStorageSync("openid"),
					app_id: that.$https.weixinAppId,
					method: 'post'
				};
				let res = await venues.transInfo(params);
				if (res.code == 1) {
					uni.navigateTo({
						url: "../../../page_points/match/match?venue_id=" +
							that.op.venue_id +"&windows=" +
							that.FormData.windows +
							"&order_type=" +
							8 ,
					});
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.choose-member {
		padding-bottom: calc(130rpx + env(safe-area-inset-bottom));

		.footer {
			position: fixed;
			width: 100%;
			background-color: white;
			bottom: 0;
			left: 0;
			padding: 20rpx 25rpx 20rpx 25rpx;
			box-sizing: border-box;

			.menu {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 40rpx;

				image {
					width: 35rpx;
					height: 35rpx;
				}

				text {
					color: rgb(51, 51, 51);
					font-size: 24rpx;
					font-weight: 700;
					margin-top: 13rpx;
				}
			}



			// /deep/.u-button {
			// 	width: 65%;
			// }
			.btn {
				flex: 1;
				color: rgb(255, 255, 255);
				font-size: 30rpx;
				padding: 26rpx 0;
				border-radius: 60rpx;
				background-color: #3e80fc;
				text-align: center;
				font-weight: 700;
			}

			.btn_n {
				flex: 1;
				color: rgb(255, 255, 255);
				font-size: 30rpx;
				padding: 26rpx 0;
				border-radius: 60rpx;
				background-color: #a6a6a6;
				text-align: center;
				font-weight: 700;
			}
		}

		.top {
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 0px 0px;
			padding: 0 30rpx 30rpx;
			margin-top: -30rpx;
			width: 100%;
		}

		.goods {
			.name {
				margin-top: 20rpx;
				font-size: 28rpx;
			}

			.status {
				margin: 20rpx 0;
				font-size: 24rpx;
			}

			.rest {
				color: #BEBEBE;
				font-size: 22rpx;
			}
		}

		.choose {
			padding: 30rpx;
		}

		/deep/.u-button--disabled {
			background: #dcdcdc !important;
			opacity: 1;
			// width: 60% !important;
		}


	}
</style>
